/**
 * 
 */
function Scrol(ele, option) {
	this.ele = ele;
	this.curentItem = 0;
	this.addCurrentIconStatus = 1;
}
Scrol.prototype = {
	init: function() {
		var _this = this;
		this.scrolItem = Array.prototype.slice.call(this.ele.children[0].children);
		this.width = this.ele.offsetWidth;
		this.height = this.ele.offsetHeight;
		this.scrolItem.forEach(function(item, index, arr) {
			item.children[0].style.width = _this.width + "px";
			item.children[0].style.height = _this.height + "px";
		});
		for(var i in this.scrolItem) {
			this.scrolItem[i].style.left = i * this.width + "px";
		}
		this.start().mouseListen().addCurrentIcon();
	},
	start: function() {

		this._setInterval = setInterval(function() {

			animate_buffer(this.ele.children[0], {
				left: -(this.width * (++this.curentItem > this.scrolItem.length - 1 ? this.curentItem = 0 : this.curentItem))
			}, 1000);
			if(this.addCurrentIconStatus) { //回复所有
				this.Icon_ul_children.forEach(function(item, index, arr) {
					item.className = '';
				});
				this.Icon_ul_children[this.curentItem].className = "active";
			}

		}.bind(this), 3000);

		return this;

	},
	mouseListen: function() {
		eventUtils.addEvent(this.ele, 'mouseover', function() {
			clearInterval(this._setInterval);
		}.bind(this));
		eventUtils.addEvent(this.ele, "mouseout", function() {
			this.start();
		}.bind(this));
		return this;
	},
	addCurrentIcon: function() {

		var frag = document.createDocumentFragment();
		this.Icon_ul = document.createElement('ul');
		frag.appendChild(this.Icon_ul);
		this.Icon_ul.className = 'banner-selector';
		for(var i = 0; i < this.scrolItem.length; i++) {
			var _li = document.createElement('li');
			_li.setAttribute('index', i);
			this.Icon_ul.appendChild(_li);
		}
		this.ele.appendChild(frag);
		this.Icon_ul_children = Array.prototype.slice.call(this.Icon_ul.children);
		this.Icon_ul_children[0].className = 'active';
		eventUtils.addEvent(this.Icon_ul, 'click', function(e) {
			e = e || window.event;
			var target = e.target || e.srcElement;
			var itemNum = +target.getAttribute('index');
			this.Icon_ul_children.forEach(function(item, index, arr) {
				item.className = '';
			});
			this.curentItem = itemNum;
			this.Icon_ul_children[this.curentItem].className = "active";
			animate_buffer(this.ele.children[0], {
				left: -(this.width *this.curentItem)
			}, 1000);
		}.bind(this));

	}

}